<template>
    <u-popup v-model="value" mode="right" width="100%">
        <view class="card-header">
            <view class="card-header-wrap">
                <view class="card-header-bar" :style="{ height: statusBarHeight + 'px' }"></view>
                <view
                    class="u-relative u-flex u-row-center u-border-bottom"
                    :style="[{ height: navbarHeight + 'px' }]"
                >
                    <u-icon
                        @click="$u.debounce(close, 200)"
                        name="close"
                        class="u-absolute"
                        :style="[headerStatusCloseIconStyle]"
                    ></u-icon>
                    <view class="exam-countdown">
                        <view class="exam-countdown-item">
                            {{ h }}
                        </view>
                        <view class="exam-countdown-colon">:</view>
                        <view class="exam-countdown-item">
                            {{ i }}
                        </view>
                        <view class="exam-countdown-colon">:</view>
                        <view class="exam-countdown-item">
                            {{ s }}
                        </view>
                    </view>
                </view>
            </view>
            <view
                class="card-header-placeholder"
                :style="{
                    height: Number(navbarHeight) + statusBarHeight + 'px',
                }"
            ></view>
        </view>
        <view class="card-body">
            <view class="card-title">
                {{ title }}
            </view>
            <view class="card-notice u-flex">
                <view class="notice-lalbel">注：</view>
                <view class="notice-item u-flex">
                    <view class="block active"></view>
                    <view class="text">已答</view>
                </view>
                <view class="notice-item u-flex">
                    <view class="block"></view>
                    <view class="text">未答</view>
                </view>
            </view>
            <view class="card-topic" v-for="(topic, index) in examRulesList" :key="index">
                <view class="topic-title">{{ topic.title }}</view>
                <view class="topic-list u-flex u-flex-wrap">
                    <view
                        class="topic-item"
                        :class="[
                            {
                                current: topicId == item.topic_id,
                                active: topicAnswered(item.topic_id),
                            },
                        ]"
                        v-for="item in topic.value"
                        :key="item.topic_id"
                        @click="change(currentTopicIndex(item.topic_id))"
                    >
                        {{ currentTopicIndex(item.topic_id) + 1 }}
                    </view>
                </view>
            </view>
        </view>
        <view class="card-footer">
            <view class="u-flex card-btn">
                <view class="left">
                    <button class="btn u-fix-ios-appearance u-border-top" @click="close">
                        继续答题
                    </button>
                </view>
                <view class="right">
                    <edu-button :disabled="disabled" type="primary" @click="onSubmit"
                        >交卷</edu-button
                    >
                </view>
            </view>
            <view class="card-btn-placeholder"></view>
        </view>
    </u-popup>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
    props: {
        /**
         * 显示状态
         */
        value: {
            type: Boolean,
            default: false,
        },
        /**
         * 开始标题
         */
        title: {
            type: String,
            default: '',
        },
        // 倒计时的时间，秒为单位
        timestamp: {
            type: [Number, String],
            default: 0,
        },
        // 真就是倒计时，否则就是计时
        pattern: {
            type: Boolean,
            default: false,
        },
        // 禁止
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        // 监听时间戳的变化
        timestamp(newVal, oldVal) {
            this.seconds = newVal
            this.formatTime(this.seconds)
        },
    },
    data() {
        return {
            d: '00', // 天的默认值
            h: '00', // 小时的默认值
            i: '00', // 分钟的默认值
            s: '00', // 秒的默认值
            seconds: 0,
        }
    },
    computed: {
        ...mapState({
            examIndex: (state) => state.examination.examIndex,
            examList: (state) => state.examination.examList,
            examRulesList: (state) => state.examination.examRulesList,
        }),
        ...mapGetters({
            statusBarHeight: 'projectSetting/globStatusBarHeight',
            navbarHeight: 'projectSetting/globNavbarHeight',
            globPrimaryColor: 'designSetting/getGlobThemeColor',

            topicId: 'examination/getTopicId',
        }),
        windowHeight() {
            return this.$u.sys().windowHeight
        },
        headerStatusCloseIconStyle() {
            let style = {
                left: '15px',
                top: '15px',
            }
            return style
        },
        bodyStyle() {
            let style = {}
            style.height = this.windowHeight - this.statusBarHeight - this.navbarHeight + 'px'
            return style
        },
    },
    methods: {
        close() {
            this.$emit('input', false)
        },
        change(index) {
            if (index != this.examIndex) {
                this.$emit('change', index)
            }
        },
        onSubmit() {
            this.$emit('confirm')
        },
        // 试题的号
        currentTopicIndex(id) {
            let num = this.examList.findIndex((item) => item.topic_id == id)
            return num
        },
        // 试题是否已答
        topicAnswered(id) {
            let data = this.examList.find((item) => item.topic_id == id)
            return data.has_answered
        },
        // 格式化时间
        formatTime(seconds) {
            let [day, hour, minute, second] = [0, 0, 0, 0]
            day = Math.floor(seconds / (60 * 60 * 24))
            // 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
            // hour为给后面计算秒和分等用的(基于显示天的前提下计算)
            hour = Math.floor(seconds / (60 * 60)) - day * 24
            // showHour为需要显示的小时
            let showHour = null
            if (this.showDays) {
                showHour = hour
            } else {
                // 如果不显示天数，将“天”部分的时间折算到小时中去
                showHour = Math.floor(seconds / (60 * 60))
            }
            minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60
            second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
            // 如果小于10，在前面补上一个"0"
            showHour = showHour < 10 ? '0' + showHour : showHour
            minute = minute < 10 ? '0' + minute : minute
            second = second < 10 ? '0' + second : second
            day = day < 10 ? '0' + day : day
            this.d = day
            this.h = showHour
            this.i = minute
            this.s = second
        },
    },
}
</script>

<style lang="scss" scoped>
.card-header {
    .card-header-wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #ffffff;
        .exam-countdown {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            color: #303133;
        }
        .exam-countdown-item {
            padding: 2rpx;
        }
        .exam-countdown-colon {
            padding: 0 5rpx;
            line-height: 1;
            padding-bottom: 4rpx;
        }
    }
    .card-header-bar {
        width: 100%;
    }
    .card-header-placeholder {
        width: 100%;
    }
}
.card-body {
    margin: 30rpx 0;

    .card-title {
        padding: 0 30rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #303133;
    }

    .card-notice {
        padding: 0 30rpx;
        margin-top: 25rpx;
        .notice-lalbel {
            font-size: 26rpx;
            color: #909399;
        }
        .notice-item {
            margin-right: 30rpx;
            .block {
                width: 28rpx;
                height: 28rpx;
                border-radius: 4rpx;
                border: 1px solid #dcdfe6;
            }
            .text {
                font-size: 26rpx;
                color: #303133;
                margin-left: 10rpx;
            }
            .active {
                @include border-color;
                @include bg-color;
            }
        }
    }
    .card-topic {
        margin-top: 40rpx;
        .topic-title {
            padding: 0 30rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: #303133;
        }
        .topic-list {
            padding-left: 30rpx;
        }
        .topic-item {
            width: 72rpx;
            height: 72rpx;
            color: #303133;
            font-size: 28rpx;
            border-radius: 8rpx;
            border-width: 1rpx;
            border-style: solid;
            border-color: #dcdfe6;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30rpx;
            margin-right: 30rpx;
            &.active {
                color: #ffffff;
                @include bg-color;
                @include border-color;
            }
            &.current {
                @include text-color;
                @include border-color;
                @include bg-color-disabled;
            }
        }
    }
}

.card-footer {
    .card-btn {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        .left {
            flex: 1;
        }
        .right {
            flex: 1;
        }
        .btn {
            padding: 0;
            font-size: 30rpx;
            color: #606266;
            font-size: 30rpx;
            height: 88rpx;
            line-height: 88rpx;
            background-color: #ffffff;
        }
        ::v-deep .edu-btn {
            height: 88rpx;
        }
        ::v-deep button {
            border-radius: 0;
        }
        ::v-deep button:after {
            border-radius: 0;
        }
    }
    .card-btn-placeholder {
        height: 88rpx;
    }
}
</style>
